<!-- 温区页面右侧 -->
<template>
  <div class="right-page">
    <div class="give-birth">
      <div class="give-birth-title">
        <div class="give-birth-text">温区预警统计列表</div>
      </div>
      <div class="give-birth-content">
        <div class="give-birth-table">
          <div class="table-header">
            <div style="width: 15%">机组</div>
            <div style="width: 15%">温区</div>
            <div style="width: 25%">预警类型</div>
            <div style="width: 28%">时间</div>
            <div style="width: 15%">状态</div>
          </div>
          <div class="table-body">
            <div
              class="table-body-item"
              v-for="(item, index) in tableData"
              :key="index"
            >
              <div style="width: 15%">{{ item.setName }}</div>
              <div style="width: 15%">{{ item.warmRegion }}</div>
              <div style="width: 25%">{{ item.dataType }}</div>
              <div style="width: 28%">{{ item.dataTime }}</div>
              <div
                style="width: 15%"
                :style="{
                  color: item.dataStatus === '已处理' ? '#00D090' : '#FF0000',
                }"
              >
                {{ item.dataStatus }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="product-size">
      <div class="give-birth-title">
        <div class="give-birth-text">温区实时监测</div>
      </div>
      <div class="product-size-content">
        <warmRegionCharts />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import warmRegionCharts from "../../../../components/warmRegionCharts.vue";
const tableData = ref([
  {
    setName: "机组1",
    warmRegion: "温区1",
    dataType: "温度过高",
    dataTime: "2024-10-30",
    dataStatus: "已处理",
  },
  {
    setName: "机组2",
    warmRegion: "温区2",
    dataType: "温度过低",
    dataTime: "2024-10-30",
    dataStatus: "已处理",
  },
  {
    setName: "机组3",
    warmRegion: "温区3",
    dataType: "温度过高",
    dataTime: "2024-10-30",
    dataStatus: "未处理",
  },
  {
    setName: "机组4",
    warmRegion: "温区4",
    dataType: "温度过高",
    dataTime: "2024-10-30",
    dataStatus: "已处理",
  },
  {
    setName: "机组5",
    warmRegion: "温区5",
    dataType: "温度过高",
    dataTime: "2024-10-30",
    dataStatus: "未处理",
  },
  {
    setName: "机组6",
    warmRegion: "温区6",
    dataType: "温度过高",
    dataTime: "2024-10-30",
    dataStatus: "未处理",
  },
]);

const computedColor = computed(() => {
  return item.dataStatus === "已处理" ? "green" : "red"; // 根据 dataStatus 的值返回颜色
});
</script>

<style scoped lang="scss">
.right-page {
  width: 374px;
  height: 950px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: "PangMenZhengDao";
  padding-right: 39px;
  .give-birth-title {
    width: 374px;
    height: 34px;
    background: url("../../../../assets/images/bgc-title.png") no-repeat;
    background-size: 100% 100%;
    text-align: center;
    line-height: 34px;
    font-size: 23px;
    .give-birth-text {
      background: linear-gradient(180deg, #ffffff 0%, #73c0ff 90%);
      -webkit-background-clip: text; /* 确保背景仅应用于文字 */
      -webkit-text-fill-color: transparent; /* 文字颜色透明以显示背景 */
    }
  }
  .give-birth {
    width: 100%;
    height: 236px;
    .give-birth-content {
      height: 226px;
      background: linear-gradient(
        240deg,
        #051522 0%,
        rgba(20, 84, 136, 0.1) 100%
      );
      .give-birth-table {
        width: 100%;
        height: 206px;
        padding-top: 15px;
        .table-header {
          width: 368px;
          height: 26px;
          background: linear-gradient(
            90deg,
            rgba(4, 52, 88, 0) 0%,
            #053759 23%,
            #0768a2 48%,
            #05385a 68%,
            rgba(4, 52, 88, 0) 98%
          );
          border-radius: 0px 0px 0px 0px;
          border: 1px solid rgba(115, 192, 255, 0.2);
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-family: "DingTalkJinBuTi";
          font-size: 14px;
          color: #ffffff;
          div {
            text-align: center;
          }
        }
        .table-body {
          width: 368px;
          height: 180px;
          background-color: #051522;
          overflow-y: auto;
          .table-body-item {
            width: 364px;
            height: 36px;
            display: flex;
            justify-content: space-between;
            line-height: 36px;
            font-family: "DingTalkJinBuTi";
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
            text-align: center;
            border-top: 1px solid rgba(115, 192, 255, 0.2);
          }
          .table-body-item:hover {
            background: linear-gradient(
              90deg,
              #043458 0%,
              rgba(4, 52, 88, 0.3) 98%
            );
            border-image: linear-gradient(
                90deg,
                rgba(115, 192, 255, 0),
                rgba(115, 192, 255, 1),
                rgba(115, 192, 255, 0)
              )
              1 1;
          }
        }
      }
    }
  }
  .product-size {
    width: 100%;
    height: 667px;
  }
}

.table-body::-webkit-scrollbar {
  width: 2px; /* 滚动条宽度 */
}

.table-body::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条背景 */
  border-radius: 5px; /* 滚动条背景的圆角 */
}

.table-body::-webkit-scrollbar-thumb {
  background: #59afed; /* 滚动条滑块颜色 */
  border-radius: 5px; /* 滚动条滑块的圆角 */
}

.table-body::-webkit-scrollbar-thumb:hover {
  background: #007acc; /* 滚动条滑块悬停时的颜色 */
}
</style>


